<template>
	<view>
		<view class=""
			style="background-color: #FFFFFF;display: flex;justify-content: space-between;align-items: center;height: 128rpx;">
			<view class="earnings" style="padding-bottom: 0;display: block;">
				<view class="">{{$t('lease.name3')}} {{total_income}}</view>
				<view class="" style="margin-top: 14rpx;">{{$t('lease.name4')}} {{yestoday_income}}</view>
			</view>
			<view class="addlist flex-between" style="width: auto;">
				<image src="../../static/addeq.png" mode="" @click="getShopList"></image>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="'height: '+scrollheight+'px;background: #EEF0F5;'">
			<view class="" v-if="list.length==0" style="display: flex;justify-content: center;padding-top: 300rpx;">
				<image style="width: 400rpx;height: 400rpx;" src="@/static/noneLine.png" mode="heightFix"></image>
			</view>
			<view class="facilitylist" v-for="(item,index) in list" :key="index">
				<view class="facilitylist_top flex-between">
					<view class="flex">
						<image :src="item.image" mode=""></image>
						<view class="">
							<view class="status" style="width: 380rpx;">
								<view class="btns1" v-if="item.is_activate==1">{{$t('lease.name5')}}</view>
								<view class="btns1 btns2" v-if="item.is_activate==0">{{$t('lease.name6')}}</view>
								<u--text size='14' :lines="1" :text="item.sn"></u--text>
							</view>
							<view class="" style="font-weight: 400;font-size: 22rpx;color: #333333;margin-top: 14rpx;">
								{{$t('lease.name7')}}：{{item.num}}{{$t('lease.name10')}}&nbsp;&nbsp;{{$t('lease.name3')}}：{{item.total_income}}&nbsp;&nbsp;{{$t('lease.name4')}}：{{item.yestoday_income}}
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="facilitylist_bottom" style="display: block;padding-bottom: 0;">
					<view class="right_top">
						<view class="">{{$t('lease.name9')}}</view>
					</view>
					<u-line-progress :percentage="item.speed" height='20' inactiveColor='#c4e8fe'
						activeColor="#5990FF"></u-line-progress>
					<view class="right_bottom">
						<view class="text">{{item.balance}}</view>
						<view class="">{{item.amount}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="addshow" :round="10" mode="bottom" @close="addshow=false">
			<view class="addmodel">
				<view class="top">
					<view class=""></view>
					<u-tabs :list="list1" :current="activeTab" :scrollable='false' lineColor='#5990FF' lineHeight='4'
						lineWidth='18' @click="handleTabs"></u-tabs>
					<image src="../../static/guanbi.a2efebd2.png" mode="" @click="addshow=false"></image>
				</view>
				<scroll-view scroll-y="true">
					<view class="list">
						<view class="listitem" v-for="(item,index) in productlist" :key="index">
							<view class="left">
								<image :src="$fun.imgUrl(item.image)" mode=""></image>
								<view class="">
									<view class="name">{{item.name}}</view>
									<view class="text"><u--text :lines="1" size='12' style="width: 300rpx;"
											color='#999999' :text="item.title"></u--text>
									</view>
									<view class="" style="font-size: 24rpx;">x{{item.device_num}}</view>
									<view class="num">￥{{item.money}}</view>
								</view>
							</view>
							<view class="btn" @click="$fun.jump(`/pageC/shop/shopdetail?id=${item.id}&from=1`)">{{$t('lease.name8')}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			scrollheight1: 0
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 20,
				scrollheight: this.scrollheight1,
				addshow: false,
				productlist: [],
				list1: [{
					name: this.$t('lease.name1'),
					type: 1
				}, {
					name: this.$t('lease.name2'),
					type: 2
				}],
				activeTab: 0,
				yestoday_income: 0,
				total_income: 0,
				type: 1
			}
		},
		onShow() {
			this.releaseSn()
		},
		onLoad(option) {
			this.activeTab = option.activeTab
			this.type = this.activeTab == 1 ? '' : 1
			if (this.activeTab) {
				this.getShopList()
			}
		},
		onReady() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			let statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 75 - statusBarHeight
			uni.setNavigationBarTitle({
				title: this.$t('lease.name')
			})
		},
		methods: {
			handleTabs(item) {
				this.activeTab = item.index
				this.type = item.type
				this.getShopList()
			},
			//托管设备
			releaseSn() {
				this.$fun.ajax.post('butt/releaseSn', {}).then(res => {
					// console.log(res)
					this.list = res.data.list
					this.total_income = res.data.total_income
					this.yestoday_income = res.data.yestoday_income
				})
			},
			//托管shop
			getShopList(id) {
				this.addshow = true
				this.$fun.ajax.post('index/release_goods', {
					type: this.type,
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.productlist = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	body {
		background: #EEF0F5;
	}

	.earnings {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin: 0 30rpx;
		display: flex;
		padding-bottom: 30rpx;
	}

	.facilitylist {
		width: 710rpx;
		// height: 183rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		margin: 30rpx auto 0;
		padding-bottom: 20rpx;


		.flex {
			display: flex;
		}

		&_top {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding: 27rpx 0 22rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.node_type {
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				width: 112rpx;
				height: 34rpx;
				background: #FF0000;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				text-align: center;
				line-height: 34rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}

			.status {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				display: flex;
				margin-top: 12rpx;

				.onLine {
					width: 56rpx;
					height: 32rpx;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
					background: #5BBE73;
				}

				.onLine1 {
					background: #426EF6;
				}

				.onLine2 {
					background: #E86E52;
				}

				.btn {
					width: 74rpx;
					height: 32rpx;
					background: #426EF6;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btn1 {
					background: #FF9C6A;
				}

				.btn2 {
					background: #9C42F6;
				}

				.btn3 {
					background: #5BBE73;
				}

				.btn4 {
					background: #42BAF6;
				}

				.btn5 {
					background: #A9A9A9;
				}

				.btns1 {
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					width: 74rpx;
					height: 32rpx;
					background: #5BBE73;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btns2 {
					background: #A9A9A9;
				}
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				display: flex;

				image {
					width: 64rpx;
					height: 64rpx;
					margin: -27rpx 0 0;
				}
			}
		}

		&_bottom {
			display: flex;
			padding: 20rpx 20rpx;
			justify-content: space-between;

			.box {
				width: 33%;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.num {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.right_top {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 10rpx;
				font-size: 22rpx;
				font-weight: 500;
			}

			.right_bottom {
				font-size: 22rpx;
				color: #000;
				display: flex;
				justify-content: space-between;
				margin-top: 6rpx;
				font-weight: 500;

				.text {
					color: #5990FF;
				}
			}
		}

		.line {
			width: 710rpx;
			height: 2rpx;
			background: #EAEAEA;
		}

		.adjustment {
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 20rpx 0;

			.btn1 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
			}

			.btn2 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #5990FF;
				border-radius: 32rpx;
				color: #FFFFFF;
			}

			.btn3 {
				width: 670rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

	.addlist {
		width: 750rpx;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		image {
			width: 162rpx;
			height: 48rpx;
		}

		.navlist {
			width: 100rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 48rpx;
			text-align: center;
			margin-right: 30rpx;
		}

		.islist {
			width: 100rpx;
			height: 48rpx;
			background: #5990FF;
			border-radius: 27rpx;
			color: #FFFFFF;
		}
	}

	.addmodel {
		width: 750rpx;
		background: #F5F1EE;
		border-radius: 20rpx 20rpx 0 0;

		.top {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 27rpx 37rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #19181A;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;

			image {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.list {
			height: 876rpx;

			.listitem {
				width: 690rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 30rpx auto 0;
				align-items: center;

				.left {
					display: flex;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.text {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					margin-top: 12rpx;
				}

				.num {
					font-weight: 500;
					font-size: 28rpx;
					color: #FF3333;
					margin-top: 30rpx;
				}

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}

				.btn {
					// width: 140rpx;
					padding: 0 10rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					border: 2rpx solid #5990FF;
					font-weight: 500;
					font-size: 24rpx;
					color: #5990FF;
					line-height: 48rpx;
					text-align: center;
				}

			}
		}
	}
</style>